<template>
  <div class="qull-box">
    <el-form ref="form">
      <el-form-item>
        <el-input v-model="question" placeholder="请一句话说明你的问题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
          <el-tab-pane label="编辑" name="first">
            <quill-editor 
              v-model="content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)">
            </quill-editor>
          </el-tab-pane>
          <el-tab-pane label="使用说明" name="second">
            <div class="preview">
              <p>1.暂时不支持图片上传功能</p>  
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item class="btn-ask">
        <el-alert
          v-if="tips"
          :title="tips"
          :closable="false"
          class="fl"
          type="warning"
          show-icon>
        </el-alert>
        <el-button @click="sendAsk" class="fr ml-15" type="primary">发帖</el-button>
        <el-button @click="cancle" class="fr">取消</el-button>
      </el-form-item>
    </el-form>
  </div> 
</template>

<script>
  import Vue from 'vue'
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import VueQuillEditor from 'vue-quill-editor'
  import { quillEditor, Quill } from 'vue-quill-editor'
  import hljs from 'highlight.js'
  // import Quill from 'quil'

  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  const Font = Quill.import('formats/font')
  Font.whitelist = ['Arial', '宋体', '黑体', '微软雅黑']
  Quill.register(Font, true)

  let toolbarOptions = [
    ['code-block'],
    ['bold', 'strike'],        // toggled buttons
    [{ 'font': ['Arial', '宋体', '黑体', '微软雅黑'] }],
    [{ 'size': [false, 'large', 'huge'] }],  // custom dropdown
    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    ['clean'],  
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'align': [] }],
    ['link', 'image']                                        // remove formatting button
  ];

  Vue.use(VueQuillEditor, {
    modules: {
      syntax: {
        highlight: text => hljs.highlightAuto(text).value
      },
      toolbar: toolbarOptions
    },
    placeholder: '请详细描述你的问题，贴出相关代码或截图，并告知你的操作步骤',
    theme: 'snow'
  })
  

  export default {
    data () {
      return {
        tips: '',
        activeName2: 'first',
        content: '',
        text: '',
        editorOption: {
          // some quill options
        }
      }
    },
    props: ['question'],
    computed: {
      ...mapGetters([
          'show_editor',
        ]),
    },
    watch: {
      question: function (val) {
        if (val.trim().length >= 5) {
          this.tips = ''
        }
      }
    },
    // manually control the data synchronization
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
      ...mapMutations({
        showEditor: 'SHOW_EDITOR',
        askQuestion: 'ASK_QUESTION'
      }),
      sendAsk() {
        if (!this.question || this.question.trim().length < 5) {
          this.tips = "标题至少输入5个字"
          return
        }
        if (!this.content || this.content.trim().length < 10) {
          this.tips = "请详细一点描述一下问题吧"
          return
        }
        this.content = this.content.replace(/<p><br><\/p>/g, '')
        this.$emit('std-asked', this.question, this.content)
        this.showEditor(0)
      },
      cancle() {
        this.showEditor(0)
        this.$emit('cancle-asked')
      },
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      onEditorBlur(quill) {
        // console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        // console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        // console.log('editor ready!', quill)
      },
      onEditorChange({ quill, html, text }) {
        // console.log('editor change!', quill, html, text)
        this.tips = ''
        this.content = html
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    components: {
      quillEditor
    },
    mounted() {
      // console.log('this is current quill instance object', this.editor)
    }
  }
</script>

<style lang="less">
  /*.ql-snow .ql-picker.ql-size .ql-picker-label::before, 
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: '字体风格';
  }*/

  .quill-editor {
    /*工具栏内用*/
    .ql-font {
      span[data-value="Arial"]::before {
        content: "Arial" !important;
        font-family: "Arial";
      }
      span[data-value="宋体"]::before {
        content: "宋体" !important;
        font-family: "宋体";
      }
      span[data-value="黑体"]::before {
        content: "黑体" !important;
        font-family: "黑体";
      }
      span[data-value="微软雅黑"]::before {
        content: "微软雅黑" !important;
        font-family: "微软雅黑";
      }
    }
   /*编辑器内容用*/
    .ql-font-Arial {
      font-family: "Arial";
    }
    .ql-font-宋体 {
      font-family: "宋体";
    }
    .ql-font-黑体 {
      font-family: "黑体";
    }
    .ql-font-微软雅黑 {
      font-family: "微软雅黑";
    }

    .ql-picker-item[data-value='14px']::before{
      content: "14px" !important;  
      font-size: 14px;
    }

    .ql-picker-item[data-value='18px']::before{
      content: "18px" !important;  
      font-size: 18px;
    }

    .ql-picker-item[data-value='22px']::before{
      content: "22px" !important;  
      font-size: 22px;
    }

    .ql-picker-item[data-value='32px']::before{
      content: "32px" !important;  
      font-size: 32px;
    }

    .ql-size-14px {
      font-size: 14px;
    }

    .ql-size-18px {
      font-size: 18px;
    }

    .ql-size-22px {
      font-size: 22px;
    }

    .ql-size-32px {
      font-size: 32px;
    } 

    .ql-picker.ql-size{
      width: 85px !important;
    }

    .ql-picker.ql-font {
      width: 98px !important;
    }
  }
  
  .qull-box {
    background: #fff;
    margin: 80px auto;
    width: 60%;
    min-width: 300px;
    padding: 20px;
    .el-alert {
      width: auto;
    }
  }

  .ql-container, 
  .preview {
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
  }

  @media (max-width: 768px) {
    .qull-box {
      margin: 20px auto;
    }
    .ql-container, 
    .preview {
      min-height: 200px;
      max-height: 250px;
      overflow-y: auto;
    }
  }

  .preview {
    padding: 20px;  
  }
  
  .ql-toolbar {
    text-align: left;
  }

  .qull-box .ql-toolbar.ql-snow,
  .qull-box .ql-container.ql-snow {
    border-color: #e4e7ed;
  }

  .qull-box .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 -1px;
  }

  .el-form-item__content {
    line-height: 1;
  }

  .btn-ask {
    margin-bottom: 0;
  }

  .ql-snow 
  .ql-picker.ql-size 
  .ql-picker-item[data-value='12px']::before {
    font-size: 12px;
  }

  .ql-snow 
  .ql-picker.ql-size 
  .ql-picker-item[data-value='14px']::before {
    font-size: 14px;
  }

  .ql-snow 
  .ql-picker.ql-size 
  .ql-picker-item[data-value='16px']::before {
    font-size: 16px;
  }

  .ql-snow 
  .ql-picker.ql-size 
  .ql-picker-item[data-value='18px']::before {
    font-size: 18px;
  }

  .ql-snow 
  .ql-picker.ql-size 
  .ql-picker-item[data-value='20px']::before {
    font-size: 20px;
  }

  .ql-snow 
  .ql-picker.ql-size 
  .ql-picker-item[data-value='28px']::before {
    font-size: 28px;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before, 
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '字体大小';
  }

  .ql-snow .ql-picker.ql-font 
  .ql-picker-item[data-value='宋体']::before {
    font-family: '宋体'
  }

  .ql-snow .ql-picker.ql-font 
  .ql-picker-item[data-value='微软雅黑']::before {
    font-family: '微软雅黑'
  }

</style>









